<template>
    <div>
        <!-- 轮播图区域 -->
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="item in lunBoTuList" >
                <img :src="item.img" alt="">
            </mt-swipe-item>
            
        </mt-swipe>
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newsList">
                    <img src="../../images/menu1.png" alt="">
                    <div class="mui-media-body">新闻资讯</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photoList">
                     <img src="../../images/menu2.png" alt="">
                    <div class="mui-media-body">图片分享</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/goodslist"">
                     <img src="../../images/menu3.png" alt="">
                    <div class="mui-media-body">商品选购</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                     <img src="../../images/menu4.png" alt="">
                    <div class="mui-media-body">百度智能</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                     <img src="../../images/menu5.png" alt="">
                    <div class="mui-media-body">腾讯骗钱</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                     <img src="../../images/menu6.png" alt="">
                    <div class="mui-media-body">网易游戏</div></a></li>
		</ul> 
    </div>
</template>

<script>
import {Toast} from "mint-ui";
 export default{
    data(){
        return {
            lunBoTuList : []
        };
    },
    created(){
        this.getLunBoTu();
    },
    methods: {
        getLunBoTu(){
            //获取轮播图的数据方法
            this.$http.get("http://www.liulongbin.top:3005/api/getLunbo").then(result => {
                if(result.body.status == 0){
                    this.lunBoTuList = result.body.message;
                }else{
                    Toast("获取轮播图失败");
                }
            });
        }
    }
} 
</script>

<style lang="scss" scoped>
.mint-swipe{
    height :200px;
}
.mint-swipe-item {
    &:nth-child(1){
        background-color : red;
    }
    &:nth-child(2){
        background-color  : blue;
    }
    &:nth-child(3){
        background-color :yellow;
    }

}
img{
    height: 100%;
    width: 100%;
}
li img{
    width: 60px;
    height:60px;
}
.mui-media-body{
    font-size: 12px;
}
</style>